

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI 3: Index of Library Examples</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../assets/title_h_bg.gif);}*/
</style>


</head>
<body id="yahoo-com" class="">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../"><img src="../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI 3: Index of Library Examples</h1></div>
</div>
<div id="bd">

<div id="yui-main">
    <div class="yui-b" page-examples" id="main"> 

<h2>YUI 3: Index of Examples</h2>
	
<p>YUI 3 ships with a series of 220 examples that illustrate the implementation of its components. The examples can be starting points for your exploration, code snippets to jump-start your own programming, or simply inspiration as to how various interaction patterns can be enabled in the web browser via YUI.</p>

<p>This page allow you to explore these examples component-by-component; on this page you'll find the full index of library examples with the link and short description of each.</p>

<h3>YUI 3 Core</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Event</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='event/event-simple.html'>Simple DOM Events</a></td><td class='description'>Use the Event Utility to attach simple DOM event handlers.</td></tr>
<tr class='even'><td class='title'><a href='event/event-timing.html'>Using 'available', 'contentready', and 'domready'</a></td><td class='description'>Event Utility gives you control over when you execute your scripts.  In addition to the window's <code>load</code> event, Event Utility lets you know when an element is available, when its children are available, and when the page's full DOM is available.</td></tr>
<tr class='odd'><td class='title'><a href='event/event-ce.html'>Using Custom Events</a></td><td class='description'>Use the Event Utility to create Custom Events that are bubbleable, preventable, cancelable and much more.</td></tr>
<tr class='even'><td class='title'><a href='event/event-focus-blur.html'>Skinning via Progressive Enhancement using the Event Utility and the Loader</a></td><td class='description'>Using Progressive Enhancement to skin checkboxes with the help of the Loader and the Event Utility's "focus" and "blur" events and the "delegate" method.</td></tr>
<tr class='odd'><td class='title'><a href='event/event-synth-arrow.html'>Creating an Arrow Event for DOM Subscription</a></td><td class='description'>Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.</td></tr>
<tr class='even'><td class='title'><a href='event/swipe-gesture.html'>Supporting A Swipe Left Gesture</a></td><td class='description'>Supporting cross-device swipe gestures, using the event-move gesture events</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Node</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='node/basic-node.html'>Node Basics</a></td><td class='description'>Using selectors and property accessors with Node.</td></tr>
<tr class='even'><td class='title'><a href='node/dom-node.html'>DOM Methods</a></td><td class='description'>Using DOM methods.</td></tr>
<tr class='odd'><td class='title'><a href='node/event-node.html'>NodeList Events</a></td><td class='description'>Using events with NodeList instances.</td></tr>
<tr class='even'><td class='title'><a href='node/nodelist.html'>NodeList</a></td><td class='description'>NodeList provides Node functionality for multiple nodes.</td></tr>
<tr class='odd'><td class='title'><a href='node/node-evt-delegation.html'>Delegating Node Events</a></td><td class='description'>Using a single event listener to handle events on multiple nodes.</td></tr>
<tr class='even'><td class='title'><a href='node/node-screen.html'>Measuring the Window and Document</a></td><td class='description'>This example demonstrates how to measure the window and document.</td></tr>
<tr class='odd'><td class='title'><a href='node/node-xy.html'>Node Positioning</a></td><td class='description'>This example demonstrates how to position an element in page coordinates.</td></tr>
<tr class='even'><td class='title'><a href='node/node-style.html'>Node Styling</a></td><td class='description'>This example demonstrates how to set styles and get style information.</td></tr>
<tr class='odd'><td class='title'><a href='node/node-insert.html'>Adding Node Content</a></td><td class='description'>This example demonstrates how to insert content into a Node.</td></tr>
<tr class='even'><td class='title'><a href='node/node-view.html'>Showing and Hiding</a></td><td class='description'>This example demonstrates how to show and hide a Node.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>The YUI Global Object</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='yui/yui-core.html'>YUI Core</a></td><td class='description'>Setting up a YUI instance</td></tr>
<tr class='even'><td class='title'><a href='yui/yui-more.html'>Load All Modules</a></td><td class='description'>Load All Modules</td></tr>
<tr class='odd'><td class='title'><a href='yui/yui-multi.html'>Multiple Instances</a></td><td class='description'>Working with multiple YUI instances.</td></tr>
<tr class='even'><td class='title'><a href='yui/yui-loader-ext.html'>YUI Loader - Dynamically Adding YUI and External Modules</a></td><td class='description'>On-demand loading of YUI and non-YUI assets</td></tr>
<tr class='odd'><td class='title'><a href='yui/yui-extend.html'>Create Class Hierarchies with <code>extend</code></a></td><td class='description'>Create class hierarchies with <code>extend</code></td></tr>
<tr class='even'><td class='title'><a href='yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code></a></td><td class='description'>Creating a composition-based class structure using <code>augment</code></td></tr>
<tr class='odd'><td class='title'><a href='yui/yui-mix.html'>Add Behaviors to Objects with <code>mix</code></a></td><td class='description'>Add behaviors to objects or static classes with <code>mix</code></td></tr>
<tr class='even'><td class='title'><a href='yui/yui-merge.html'>Combine Data Sets with <code>merge</code></a></td><td class='description'>Combine data sets and create shallow copies of objects with <code>merge</code></td></tr>
<tr class='odd'><td class='title'><a href='yui/yui-isa.html'>Check Data Types with <code>Lang</code></a></td><td class='description'>Check data types with the <code>Lang Utilities</code></td></tr>
<tr class='even'><td class='title'><a href='yui/yui-ua.html'>Browser Detection with <code>UA</code></a></td><td class='description'>Get information about the current user agent with <code>UA</code></td></tr>
<tr class='odd'><td class='title'><a href='yui/yui-compat.html'>YUI 2 in 3</a></td><td class='description'>Working with YUI 2 in 3</td></tr>
<tr class='even'><td class='title'><a href='yui/yui-gallery.html'>Natively use YUI Gallery Modules</a></td><td class='description'>Natively use YUI Gallery Modules</td></tr>
<tr class='odd'><td class='title'><a href='yui/yui-gallery2.html'>YUI 2 in 3 &amp; Gallery Modules</a></td><td class='description'>Use YUI 2 in 3 &amp; Gallery Modules</td></tr>
</tbody>
</table>

<h3>YUI 3 Utilities</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Animation</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='anim/basic.html'>Basic Animation</a></td><td class='description'>Creating and using a simple animation.</td></tr>
<tr class='even'><td class='title'><a href='anim/easing.html'>Animation Easing</a></td><td class='description'>The Animation Utility allows you to implement 'easing effects' &mdash; for example, when an animation gradually slows down as it nears completion, that's an easing effect known as 'ease-in'.  This example shows you how to use easing effects with your animations.</td></tr>
<tr class='odd'><td class='title'><a href='anim/colors.html'>Animating Colors</a></td><td class='description'>Color animations can be effective indicators of state during the lifespan of a dynamic page.  This example shows you how to animate color attributes of an element.</td></tr>
<tr class='even'><td class='title'><a href='anim/alt-iterations.html'>Alternating Iterations</a></td><td class='description'>The <code>direction</code> attribute can be used to reverse the animation on alternate iterations.</td></tr>
<tr class='odd'><td class='title'><a href='anim/anim-xy.html'>Animating XY Position</a></td><td class='description'>This example shows you how to animate the xy coordinates of an element.</td></tr>
<tr class='even'><td class='title'><a href='anim/curve.html'>Animating Along a Curved Path</a></td><td class='description'>This example demonstrates animating an element along a curved path using bezier control points.</td></tr>
<tr class='odd'><td class='title'><a href='anim/scroll.html'>Animated Scrolling</a></td><td class='description'>This example shows how to animate the scrolling of an element.</td></tr>
<tr class='even'><td class='title'><a href='anim/reverse.html'>Reversing an Animation</a></td><td class='description'>The <code>reverse</code> attribute allows you to change the run direction of an animation.</td></tr>
<tr class='odd'><td class='title'><a href='anim/end-event.html'>Using the End Event</a></td><td class='description'>This example demonstrates how to use the <code>end</code> event.</td></tr>
<tr class='even'><td class='title'><a href='anim/anim-chaining.html'>Chaining Animations Using the <code>end</code> Event</a></td><td class='description'>Animations can be chained (set to fire sequentially) using Animation's <code>end</code> event.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>ArraySort</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='arraysort/arraysort_basic.html'>Case-insensitve array sorting</a></td><td class='description'>Case-insensitive sorting of strings.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>AsyncQueue</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='async-queue/queue_app.html'>Building a UI with AsyncQueue</a></td><td class='description'>This example employs AsyncQueue to incrementally construct an application interface; this illustrates the approach you'd take to allow chunked rendering of the UI in a process-intensive application.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Cache</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cache/cache_basic.html'>Basic Caching</a></td><td class='description'>Basic caching functionality with the Cache Utility.</td></tr>
<tr class='even'><td class='title'><a href='cache/cache_offline.html'>Offline Caching</a></td><td class='description'>Offline caching implements HTML 5 localStorage when
    available, to allow data to persist across browser sessions.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Cookie</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cookie/cookie-simple-example.html'>Simple Cookie Example</a></td><td class='description'>Demonstrates basic usage of the Cookie utility for reading and writing cookies.</td></tr>
<tr class='even'><td class='title'><a href='cookie/cookie-advanced-example.html'>Advanced Cookie Example</a></td><td class='description'>Demonstrates using the Cookie utility to get, set and remove cookies.</td></tr>
<tr class='odd'><td class='title'><a href='cookie/cookie-subcookie-example.html'>Subcookie Example</a></td><td class='description'>Demonstrates using the Cookie utility to get and set subcookies.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>DataSchema</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='dataschema/dataschema_array.html'>DataSchema.Array</a></td><td class='description'>Schema parsing a JavaScript array.</td></tr>
<tr class='even'><td class='title'><a href='dataschema/dataschema_json.html'>DataSchema.JSON</a></td><td class='description'>Schema parsing JSON data.</td></tr>
<tr class='odd'><td class='title'><a href='dataschema/dataschema_table.html'>DataSchema.XML for HTML Tables</a></td><td class='description'>Schema parsing data held in TABLE elements.</td></tr>
<tr class='even'><td class='title'><a href='dataschema/dataschema_xml.html'>DataSchema.XML for XML Data</a></td><td class='description'>Schema parsing XML data.</td></tr>
<tr class='odd'><td class='title'><a href='dataschema/dataschema_text.html'>DataSchema.Text</a></td><td class='description'>Schema parsing delimited plain-text data.</td></tr>
<tr class='even'><td class='title'><a href='dataschema/dataschema_parsing.html'>Enforcing DataTypes</a></td><td class='description'>Parsing data into specified types as the schema is being applied.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>DataSource</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='datasource/datasource_local.html'>DataSource.Local</a></td><td class='description'>The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.</td></tr>
<tr class='even'><td class='title'><a href='datasource/datasource_get.html'>DataSource.Get</a></td><td class='description'>The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.</td></tr>
<tr class='odd'><td class='title'><a href='datasource/datasource_io.html'>DataSource.IO</a></td><td class='description'>The IO DataSource manages retrieval of data from remote sources, via the IO Utility.</td></tr>
<tr class='even'><td class='title'><a href='datasource/datasource_function.html'>DataSource.Function</a></td><td class='description'>The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms</td></tr>
<tr class='odd'><td class='title'><a href='datasource/datasource_caching.html'>DataSource with Caching</a></td><td class='description'>Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.</td></tr>
<tr class='even'><td class='title'><a href='datasource/datasource_offlinecache.html'>DataSource with Offline Cache</a></td><td class='description'>The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.</td></tr>
<tr class='odd'><td class='title'><a href='datasource/datasource_polling.html'>DataSource with Polling</a></td><td class='description'>Use the Pollable extension to enable polling in your DataSource.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>DataType</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='datatype/datatype_dateformat_lang.html'>Formatting Dates Using Language Resource Bundles</a></td><td class='description'>Formatting dates into strings using pre-packaged language resource bundles.</td></tr>
<tr class='even'><td class='title'><a href='datatype/datatype_dateformat.html'>DataType.Date.format()</a></td><td class='description'>Formatting dates into strings.</td></tr>
<tr class='odd'><td class='title'><a href='datatype/datatype_dateparse.html'>DataType.Date.parse()</a></td><td class='description'>Parsing data into dates.</td></tr>
<tr class='even'><td class='title'><a href='datatype/datatype_numberformat.html'>DataType.Number.format()</a></td><td class='description'>Formatting numbers into strings.</td></tr>
<tr class='odd'><td class='title'><a href='datatype/datatype_numberparse.html'>DataType.Number.parse()</a></td><td class='description'>Parsing data into numbers.</td></tr>
<tr class='even'><td class='title'><a href='datatype/datatype_xmlformat.html'>DataType.XML.format()</a></td><td class='description'>Formatting XML documents into strings.</td></tr>
<tr class='odd'><td class='title'><a href='datatype/datatype_xmlparse.html'>DataType.XML.parse()</a></td><td class='description'>Parsing strings into XML documents.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Drag &amp; Drop</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='dd/simple-drag.html'>Simple Drag</a></td><td class='description'>This example shows a simple drag interaction that doesn't require a drop interaction.</td></tr>
<tr class='even'><td class='title'><a href='dd/drag-plugin.html'>Drag Node Plugin</a></td><td class='description'>This example shows how to apply the Drag Plugin to a node</td></tr>
<tr class='odd'><td class='title'><a href='dd/proxy-drag.html'>Proxy Drag</a></td><td class='description'>This example shows a simple proxy drag interaction that doesn't require a drop interaction.</td></tr>
<tr class='even'><td class='title'><a href='dd/constrained-drag.html'>Drag Constrained to a Region</a></td><td class='description'>This example shows how to constrain a draggable Node to another Node's region.</td></tr>
<tr class='odd'><td class='title'><a href='dd/groups-drag.html'>Interaction Groups</a></td><td class='description'>Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation.</td></tr>
<tr class='even'><td class='title'><a href='dd/shim-drag.html'>Using the Drag Shim</a></td><td class='description'>This example shows the use of the drag shim when dragging nodes over other troublesome nodes.</td></tr>
<tr class='odd'><td class='title'><a href='dd/anim-drop.html'>Animated Drop Targets</a></td><td class='description'>This example will show you how to make an animated node a Drop target.</td></tr>
<tr class='even'><td class='title'><a href='dd/drop-code.html'>Drop Based Coding</a></td><td class='description'>This example shows how to use the Drop Target events to code your application.</td></tr>
<tr class='odd'><td class='title'><a href='dd/winscroll.html'>Window Scrolling</a></td><td class='description'>This example shows how you can use the DD Scroll plugin to scroll the browser window as you drag.</td></tr>
<tr class='even'><td class='title'><a href='dd/delegate.html'>Drag Delegation</a></td><td class='description'>This example shows how you can use DD.Delegate to create a scalable solution which supports multiple draggable items.</td></tr>
<tr class='odd'><td class='title'><a href='dd/delegate-drop.html'>Drag Delegation with a Drop Target</a></td><td class='description'>This example uses DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.</td></tr>
<tr class='even'><td class='title'><a href='dd/delegate-plugins.html'>Using Drag Plugins with Delegate</a></td><td class='description'>This example show how you can use the Drag plugins with a DD Delegate based solution.</td></tr>
<tr class='odd'><td class='title'><a href='dd/list-drag.html'>List Reorder w/Bubbling</a></td><td class='description'>This example shows how to make a sortable list using Custom Event Bubbling.</td></tr>
<tr class='even'><td class='title'><a href='dd/scroll-list.html'>List Reorder w/Scrolling</a></td><td class='description'>This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.</td></tr>
<tr class='odd'><td class='title'><a href='dd/portal-drag.html'>Portal Style Example</a></td><td class='description'>Portal style example using Drag & Drop Event Bubbling and Animation.</td></tr>
<tr class='even'><td class='title'><a href='dd/photo-browser.html'>Photo Browser</a></td><td class='description'>An example Photo Browser application.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Get</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='get/get-script-basic.html'>Getting a Script Node with JSON Data</a></td><td class='description'>This example illustrates the simple use case in which the Get Utility is used to retrieve JSON data from a web service.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>History</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='history/history_tabview.html'>History + TabView</a></td><td class='description'>This example demonstrates how to add browser history support to a TabView widget using the History Utility.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>IO</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='io/io-get.html'>GET Transaction</a></td><td class='description'>Explores the use of HTTP GET to request data from the server, and handling the transaction lifecycle using events.</td></tr>
<tr class='even'><td class='title'><a href='io/io-post.html'>POST Transaction</a></td><td class='description'>Explores the use of HTTP POST to send data to the server and retrieve the server's response.</td></tr>
<tr class='odd'><td class='title'><a href='io/io-weather.html'>XML Transaction &mdash; Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</a></td><td class='description'>Demonstrates how to retrieve XML data from a web service and make use of that information within the page.</td></tr>
<tr class='even'><td class='title'><a href='io/io-xdr.html'>Cross-Domain JSON Transaction &mdash; Retrieving a News Feed from Yahoo! Pipes</a></td><td class='description'>Fetch a cross-domain, JSON-formatted RSS news feed directly from <a href='http://pipes.yahoo.com'>Yahoo! Pipes</a>.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>ImageLoader</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='imageloader/imageloader-basics.html'>Basic Features of the ImageLoader Utility</a></td><td class='description'>Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific events happen or specific time limits expire.</td></tr>
<tr class='even'><td class='title'><a href='imageloader/imageloader-fold.html'>Loading Images Below the Fold</a></td><td class='description'>Loading images above the fold immediately while deferring the loading of images below the fold.</td></tr>
<tr class='odd'><td class='title'><a href='imageloader/imageloader-class.html'>Using ImageLoader with CSS Class Names</a></td><td class='description'>Using CSS class names to target specific images for deferred loading.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Internationalization</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='intl/intl-basic.html'>Language Resource Bundles</a></td><td class='description'>How to create components which use language resource bundles</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>JSON</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='json/json_connect.html'>JSON with Y.io</a></td><td class='description'>Use JSON to parse data received via XMLHttpRequest via <a href='http://developer.yahoo.com/yui/3/io/'>Y.io</a> calls — a simple JSON use case.</td></tr>
<tr class='even'><td class='title'><a href='json/json_freeze_thaw.html'>Rebuilding Class Instances from JSON Data</a></td><td class='description'>Use the <em>replacer</em> and <em>reviver</em> parameters to reconstitute object instances that have been serialized to JSON.</td></tr>
<tr class='odd'><td class='title'><a href='json/json_convert_values.html'>Adding New Object Members During Parsing</a></td><td class='description'>Use a currency conversion calculation to add a new price member to a JSON response, demonstrating how JSON data, once retrieved, can be transformed during parsing.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>JSONP</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='jsonp/jsonp_github.html'>Getting Cross Domain JSON Data Using Y.jsonp()</a></td><td class='description'>Get basic <a href='http://github.com'>GitHub</a> user info using a <code>Y.jsonp(url, callback)</code>.</td></tr>
<tr class='even'><td class='title'><a href='jsonp/jsonp_gallery.html'>Reusing a JSONPRequest Instance to Poll a Remote Server</a></td><td class='description'>Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Recordset</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='recordset/recordset_basic.html'>Basic Recordset</a></td><td class='description'>Shows how to instantiate and interact with a standard Recordset by adding, removing and updating records/objects. Explains the events that are fired, and shows how to access the built-in hash table that stores records by their YUIDs.</td></tr>
<tr class='even'><td class='title'><a href='recordset/recordset_filter.html'>Recordset Filter Plugin</a></td><td class='description'>Shows how to use filtering methods to Recordset. Key-value filtering, and filtering by providing a custom function are covered.</td></tr>
<tr class='odd'><td class='title'><a href='recordset/recordset_indexer.html'>Recordset Indexer Plugin</a></td><td class='description'>Shows how to create and access hash tables on Recordset. Tables are kept in sync through events fired by Recordset.</td></tr>
<tr class='even'><td class='title'><a href='recordset/recordset_sort.html'>Recordset Sort Plugin</a></td><td class='description'>Shows how to sort a Recordset using the default sorter, or a custom sort function. Additionally, demonstrates how convenience attributes help in determining when Recordset is in a sorted state, and what the last sort parameters were.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Resize</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='resize/simple-resize.html'>Simple Resize</a></td><td class='description'>This example shows a simple resize implemenation.</td></tr>
<tr class='even'><td class='title'><a href='resize/con-resize.html'>Simple Resize with Constrain Plugin</a></td><td class='description'>This example shows a simple resize implementation that utilizes the <code>ResizeConstrained</code> plugin to set min/max dimensions and to lock in the resized element's aspect ratio.</td></tr>
<tr class='odd'><td class='title'><a href='resize/image-resize.html'>8-way Image Resize</a></td><td class='description'>This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Sortable</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='sortable/simple-sortable.html'>Simple Sortable List</a></td><td class='description'>Simple Sortable list example</td></tr>
<tr class='even'><td class='title'><a href='sortable/sortable-float.html'>Simple Sortable List - Floated Nodes</a></td><td class='description'>Simple Sortable list example with floated nodes.</td></tr>
<tr class='odd'><td class='title'><a href='sortable/sortable-multi.html'>Multiple Sortable Lists - Separate</a></td><td class='description'>Multiple Sortable Lists that are separate from one another.</td></tr>
<tr class='even'><td class='title'><a href='sortable/sortable-multi-full.html'>Multiple Sortable Lists - Full Join</a></td><td class='description'>Multiple Sortable Lists that are fully joined together.</td></tr>
<tr class='odd'><td class='title'><a href='sortable/sortable-multi-out.html'>Multiple Sortable Lists - Outer Join</a></td><td class='description'>Multiple Sortable Lists that are outer joined together.</td></tr>
<tr class='even'><td class='title'><a href='sortable/sortable-multi-in.html'>Multiple Sortable Lists - Inner Join</a></td><td class='description'>Multiple Sortable Lists that are inner joined together.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>StyleSheet</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='stylesheet/stylesheet_theme.html'>Adjusting a Page Theme on the Fly</a></td><td class='description'>Use StyleSheet to adjust the CSS rules applying a page theme from user input</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Transition</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='transition/transition-basic.html'>Basic Node Transitions</a></td><td class='description'>Demonstrates the basic usage of Transitions.</td></tr>
<tr class='even'><td class='title'><a href='transition/transition-usage.html'>Using Node Transitions</a></td><td class='description'>Demonstrates more advanced usage of Transitions.</td></tr>
<tr class='odd'><td class='title'><a href='transition/transition-view.html'>Showing and Hiding with Transitions</a></td><td class='description'>Demonstrates how to animate Node's show and hide methods.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Uploader</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='uploader/uploader-simple.html'>Single File Upload with Progress Tracking and a Sprite-skinned Button</a></td><td class='description'>Explores using the Uploader to create a custom-skinned Browse button, upload a single file to the server, while tracking its upload progress</td></tr>
<tr class='even'><td class='title'><a href='uploader/uploader-multiple.html'>Multiple File Upload with Progress Tracking and a Transparent Overlay Upload Button</a></td><td class='description'>Demonstrates how to upload multiple files and track their progress, while using custom UI for the 'Browse' button.</td></tr>
<tr class='odd'><td class='title'><a href='uploader/uploader-withvars.html'>Single File Upload with GET and POST Vars Submission and Server Data Return</a></td><td class='description'>Explores including POST and GET variables with the file upload and receiving a response from the server</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>YQL Query</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='yql/simple-yql.html'>Simple YQL Query</a></td><td class='description'>Create a simple YQL Query to retrieve data from the Yahoo! Weather YQL table.</td></tr>
<tr class='even'><td class='title'><a href='yql/yql-flickr-requery.html'>YQL Flickr Requery</a></td><td class='description'>Use the Flickr Recent Photos YQL table to pull in a small set of recent Flickr images every 8 seconds.</td></tr>
<tr class='odd'><td class='title'><a href='yql/yql-oauth.html'>YQL 2-Legged oAuth</a></td><td class='description'>Use YQL Query and the oAuth YUI Gallery module to make an authenticated YQL request to the Yahoo! News Search web service</td></tr>
</tbody>
</table>

<h3>YUI 3 Component Infrastructure</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Attribute</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='attribute/attribute-basic.html'>Basic Attribute Configuration</a></td><td class='description'>Use the Attribute API to define, set and get attribute values.</td></tr>
<tr class='even'><td class='title'><a href='attribute/attribute-rw.html'>Read-Only and Write-Once Attributes</a></td><td class='description'>Configure attributes to be readOnly or writeOnce.</td></tr>
<tr class='odd'><td class='title'><a href='attribute/attribute-event.html'>Attribute Change Events</a></td><td class='description'>How to listen for changes in attribute values.</td></tr>
<tr class='even'><td class='title'><a href='attribute/attribute-basic-speeddate.html'>Attribute Based Speed Dating</a></td><td class='description'>Create a basic SpeedDater class, with Attribute support</td></tr>
<tr class='odd'><td class='title'><a href='attribute/attribute-event-speeddate.html'>Attribute Event Based Speed Dating</a></td><td class='description'>Refactors the basic Speed Dating example, to use attribute change events to update rendered elements, and have two instances react to another.</td></tr>
<tr class='even'><td class='title'><a href='attribute/attribute-getset.html'>Attribute Getters, Setters and Validators</a></td><td class='description'>Add custom methods to get and set attribute values and provide validation support.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Widget</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='widget/widget-extend.html'>Extending the Base Widget Class</a></td><td class='description'>Shows how to extend the base widget class, to create your own Widgets.</td></tr>
<tr class='even'><td class='title'><a href='widget/widget-build.html'>Creating Custom Widget Classes</a></td><td class='description'>Shows how to use Base.build to create custom Widget classes.</td></tr>
<tr class='odd'><td class='title'><a href='widget/widget-plugin.html'>Creating a Widget Plugin</a></td><td class='description'>Shows how to create an IO plugin for Widget</td></tr>
<tr class='even'><td class='title'><a href='widget/widget-tooltip.html'>Creating a Simple Tooltip Widget</a></td><td class='description'>Shows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class.</td></tr>
<tr class='odd'><td class='title'><a href='widget/widget-parentchild-listbox.html'>Creating a Hierarchical ListBox Widget</a></td><td class='description'>Shows how to extend the Widget class, and add WidgetParent and WidgetChild to create a simple ListBox widget.</td></tr>
</tbody>
</table>

<h3>YUI 3 Widgets</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>AutoComplete</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='autocomplete/ac_local.html'>Basic Local Data</a></td><td class='description'>How to provide autocomplete suggestions from a local array.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_jsonp.html'>Remote Data via JSONP</a></td><td class='description'>How to provide autocomplete suggestions using a remote JSONP source.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_yql.html'>Remote Data via YQL</a></td><td class='description'>How to provide autocomplete suggestions using a YQL query source.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_datasource.html'>Remote Data via DataSource</a></td><td class='description'>How to provide autocomplete suggestions using a DataSource instance.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_tagging.html'>Tag Completion using Query Delimiters</a></td><td class='description'>How to implement delimited tag completion.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_flickr.html'>Find Photos on Flickr (Custom Formatting, YQL Source)</a></td><td class='description'>How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_filter.html'>Filter a Set of Existing Items on the Page</a></td><td class='description'>How to use autocomplete-base to filter a set of existing items on a page.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Charts</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='charts/charts-simple.html'>Basic Charts Implementation</a></td><td class='description'>Shows how to create a simple chart.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-multiseries.html'>Chart with Multiple Series</a></td><td class='description'>Chart with multiple series.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-column.html'>Specify Chart Type</a></td><td class='description'>Specify the type of chart.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-stackedcolumn.html'>Create Stacked Chart</a></td><td class='description'>Creates a stacked column chart.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-timeaxis.html'>Create a Chart with a Time Axis</a></td><td class='description'>Creates a chart with a Time Axis.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-gridlines.html'>Add Gridlines to a Chart</a></td><td class='description'>Adds gridlines to a chart.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-stackedarea.html'>Create Stacked Area Chart with Planar Based Events</a></td><td class='description'>Creates a stacked area chart with planar based events.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-globalstyles.html'>Customize a Chart</a></td><td class='description'>Customize a chart with its global styles object.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-customizedtooltip.html'>Customize a Chart's Tooltip</a></td><td class='description'>Customize a tooltip using the tooltip attribute.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-objectstyles.html'>Define a Chart's Axes and Series</a></td><td class='description'>Specify axes and series in a chart.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-pie.html'>Pie Chart</a></td><td class='description'>Shows how to create a pie chart.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-dualaxes.html'>Dual Axes Chart</a></td><td class='description'>Shows how to create a chart with multiple axes.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-axisupdate.html'>Update Chart Axis</a></td><td class='description'>Shows how access and update a chart's axis.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-seriesupdate.html'>Update Chart Series</a></td><td class='description'>Shows how access and update a chart's series.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>DataTable</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='datatable/datatable_basic.html'>Basic DataTable</a></td><td class='description'>This example illustrates simple DataTable use cases.</td></tr>
<tr class='even'><td class='title'><a href='datatable/datatable_dsget.html'>DataTable + DataSource.Get + JSON Data</a></td><td class='description'>DataTable loaded with JSON data from a remote webservice via DataSource.Get</td></tr>
<tr class='odd'><td class='title'><a href='datatable/datatable_dsio.html'>DataTable + DataSource.IO + XML Data</a></td><td class='description'>DataTable loaded with XML data from a remote webservice via DataSource.IO.</td></tr>
<tr class='even'><td class='title'><a href='datatable/datatable_formatting.html'>Formatting Row Data for Display</a></td><td class='description'>Custom format data for display.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/datatable_nestedcols.html'>Nested Column Headers</a></td><td class='description'>DataTable with nested column headers.</td></tr>
<tr class='even'><td class='title'><a href='datatable/datatable_sort.html'>Column Sorting</a></td><td class='description'>DataTable with column sorting.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/datatable_scroll.html'>Scrolling DataTable</a></td><td class='description'>DataTable with vertical and/or horizontal scrolling rows.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Dial</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='dial/dial-basic.html'>Basic Dial</a></td><td class='description'>Create a Dial from existing markup on the page — a simple use case.</td></tr>
<tr class='even'><td class='title'><a href='dial/dial-text-input.html'>Dial Linked With Text Input</a></td><td class='description'>Link a Dial with a text input field.</td></tr>
<tr class='odd'><td class='title'><a href='dial/dial-image-background.html'>Dial With Image Background</a></td><td class='description'>Use image backgrounds to control the visual display of a Dial.</td></tr>
<tr class='even'><td class='title'><a href='dial/dial-image-surrounding.html'>Dial With a Surrounding Image</a></td><td class='description'>Use images to surround a Dial instance and provide additional styling.</td></tr>
<tr class='odd'><td class='title'><a href='dial/dial-interactive.html'>Dial With Interactive UI</a></td><td class='description'>This example employs Dial to drive an interactive UI.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Overlay</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='overlay/overlay-xy.html'>Basic XY Positioning</a></td><td class='description'>Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.</td></tr>
<tr class='even'><td class='title'><a href='overlay/overlay-align.html'>Alignment Support</a></td><td class='description'>Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport.</td></tr>
<tr class='odd'><td class='title'><a href='overlay/overlay-stack.html'>Stack Support</a></td><td class='description'>Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page.</td></tr>
<tr class='even'><td class='title'><a href='overlay/overlay-stdmod.html'>Standard Module Support</a></td><td class='description'>Shows how to modify content in the Overlay's header, body and footer sections.</td></tr>
<tr class='odd'><td class='title'><a href='overlay/overlay-constrain.html'>Constrain Support</a></td><td class='description'>Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay.</td></tr>
<tr class='even'><td class='title'><a href='overlay/overlay-io-plugin.html'>IO Plugin</a></td><td class='description'>Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.</td></tr>
<tr class='odd'><td class='title'><a href='overlay/overlay-anim-plugin.html'>Animation Plugin</a></td><td class='description'>Shows how to create a simple plugin to animate the Overlay's movement and visibility.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Rich Text Editor</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='editor/editor-instance.html'>Using the Editor's Instance</a></td><td class='description'>Use the Editor's instance to query the iframe</td></tr>
<tr class='even'><td class='title'><a href='editor/editor-events.html'>Using the Editor's Events</a></td><td class='description'>Use the Editor's events</td></tr>
<tr class='odd'><td class='title'><a href='editor/editor-nodechange.html'>Using the Editor's nodeChange Event</a></td><td class='description'>Use the Editor's nodeChange event</td></tr>
<tr class='even'><td class='title'><a href='editor/editor-exec.html'>Creating ExecCommands</a></td><td class='description'>Creating custom ExecCommands</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>ScrollView</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='scrollview/scrollview-base.html'>Basic ScrollView Without a Scroll Indicator</a></td><td class='description'>ScrollView without a Scroll Indicator</td></tr>
<tr class='even'><td class='title'><a href='scrollview/scrollview.html'>ScrollView with Scroll Indicator and Link Suppression Behavior.</a></td><td class='description'>This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling.</td></tr>
<tr class='odd'><td class='title'><a href='scrollview/scrollview-horiz.html'>Horizontal ScrollView</a></td><td class='description'>Horizontal ScrollView</td></tr>
<tr class='even'><td class='title'><a href='scrollview/scrollview-paging.html'>ScrollView Paginator Plugin</a></td><td class='description'>ScrollView Paginator Plugin</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Slider</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='slider/slider_basic.html'>Basic Sliders</a></td><td class='description'>The basics of setting up a horizontal and vertical Slider</td></tr>
<tr class='even'><td class='title'><a href='slider/slider_from_markup.html'>Creating a Slider from Existing Markup</a></td><td class='description'>Creating a horizontal Slider from existing markup</td></tr>
<tr class='odd'><td class='title'><a href='slider/slider_skin.html'>Alternate Skins</a></td><td class='description'>Specifying an alternate skin for a Slider instance</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>TabView</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='tabview/tabview-basic.html'>TabView from Existing Markup</a></td><td class='description'>This example shows how to create a TabView wigdet from existing HTML.</td></tr>
<tr class='even'><td class='title'><a href='tabview/tabview-fromjs.html'>Dynamic TabView from JavaScript</a></td><td class='description'>This example shows how to create a TabView wigdet from JavaScript.</td></tr>
<tr class='odd'><td class='title'><a href='tabview/tabview-add-remove.html'>Adding and Removing Tabs</a></td><td class='description'>This example shows how to add and remove Tabs.</td></tr>
<tr class='even'><td class='title'><a href='tabview/tabview-io.html'>Loading Tab Content</a></td><td class='description'>This example shows how to load tab content remotely using an IO plugin.</td></tr>
</tbody>
</table>

<h3>YUI 3 Developer Tools</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Console</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='console/console_basic.html'>Creating a Console for Debugging</a></td><td class='description'>The basics of setting up a Console</td></tr>
<tr class='even'><td class='title'><a href='console/console_yui_config.html'>YUI Configuration to Filter Log Messages</a></td><td class='description'>Using your YUI instance configuration to filter which messages are reported in the Console</td></tr>
<tr class='odd'><td class='title'><a href='console/console_global.html'>Creating a Universal Console</a></td><td class='description'>Using the Console's logSource attribute to consolidate log messages from multiple YUI instances into one Console</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Plugin.ConsoleFilters</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='console-filters/console-filters_intro.html'>Using the ConsoleFilters Plugin</a></td><td class='description'>Adding the ConsoleFilters plugin to a Console instance for more granular run time log message filtering</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Profiler</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='profiler/profiler-simple-example.html'>Simple Profiling Example</a></td><td class='description'>Demonstrates basic usage of the Profiler for profiling functions.</td></tr>
<tr class='even'><td class='title'><a href='profiler/profiler-object-example.html'>Object Profiling Example</a></td><td class='description'>Demonstrates usage of the Profiler for profiling objects.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Test</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='test/test-simple-example.html'>Simple Testing Example</a></td><td class='description'>Demonstrates basic usage of YUI Test for setting up and running tests.</td></tr>
<tr class='even'><td class='title'><a href='test/test-advanced-test-options.html'>Advanced Test Options</a></td><td class='description'>Demonstrates how to use advanced testing features such as defining tests that should fail, tests that should be ignored, and tests that should throw an error.</td></tr>
<tr class='odd'><td class='title'><a href='test/test-array-tests.html'>Array Processing</a></td><td class='description'>Demonstrates how to use the ArrayAssert object to test array data.</td></tr>
<tr class='even'><td class='title'><a href='test/test-async-test.html'>Asynchronous Testing</a></td><td class='description'>Demonstrates basic asynchronous tests.</td></tr>
<tr class='odd'><td class='title'><a href='test/test-async-event-tests.html'>Asynchronous Event Testing</a></td><td class='description'>Demonstrates using events with asynchronous tests.</td></tr>
</tbody>
</table>

<h3>YUI 3 CSS Foundation</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>CSS Base</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cssbase/cssbase-basic.html'>Global (Page-Level) Example</a></td><td class='description'>When CSS Base is included in a page it provides consistent and basic cross-browser styling for HTML elements.</td></tr>
<tr class='even'><td class='title'><a href='cssbase/cssbase-context.html'>Contextual Example</a></td><td class='description'>CSS Base applied to a portion of a page based on the location of a class value.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>CSS Fonts</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cssfonts/cssfonts-basic.html'>Global (Page-Level) Example</a></td><td class='description'>When CSS Fonts is included in a page, it applies a baseline font treatment to all HTML elements. This baseline is Arial at the equivalent of 13px size and 16px line-height.</td></tr>
<tr class='even'><td class='title'><a href='cssfonts/cssfonts-context.html'>Contextual Example</a></td><td class='description'>Use the alternate contextual version of YUI Fonts to have precise control over which regions of the page are targeted.</td></tr>
<tr class='odd'><td class='title'><a href='cssfonts/cssfonts-size.html'>Setting Font Size</a></td><td class='description'>Define all non-baseline sizes in percentages when using YUI Fonts.</td></tr>
<tr class='even'><td class='title'><a href='cssfonts/cssfonts-family.html'>Setting Font Family</a></td><td class='description'>When using YUI Fonts, set font-family as you would normally.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>CSS Grids</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cssgrids/cssgrids-units.html'>Using Units</a></td><td class='description'>Each unit has a className that provides its percentage width.</td></tr>
<tr class='even'><td class='title'><a href='cssgrids/cssgrids-fixed.html'>Fixed Page Template</a></td><td class='description'>This is a template for creating fixed-width layouts.</td></tr>
<tr class='odd'><td class='title'><a href='cssgrids/cssgrids-fluid.html'>Fluid Page Template</a></td><td class='description'>This is a template for creating fluid layouts.</td></tr>
<tr class='even'><td class='title'><a href='cssgrids/cssgrids-align.html'>Aligning Units</a></td><td class='description'>Basic CSS properties are leveraged to horizontally and vertically align units.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>CSS Reset</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cssreset/cssreset-basic.html'>Global (Page-Level) Example</a></td><td class='description'>When CSS Reset is included in a page, it removes the browser-provided styling for HTML elements.</td></tr>
<tr class='even'><td class='title'><a href='cssreset/cssreset-context.html'>Contextual Example</a></td><td class='description'>CSS Reset applied to a portion of a page based on the location of a class value.</td></tr>
</tbody>
</table>

<h3>YUI 3 Node Plugins</h3><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>Focus Manager Node Plugin</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='node-focusmanager/node-focusmanager-1.html'>Accessible Toolbar</a></td><td class='description'>Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.</td></tr>
<tr class='even'><td class='title'><a href='node-focusmanager/node-focusmanager-2.html'>Accessible TabView</a></td><td class='description'>Creating an accessible tabview widget using the Focus Manager Node Plugin, Event's delegation support, and Node's support for the WAI-ARIA Roles and States.</td></tr>
<tr class='odd'><td class='title'><a href='node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button</a></td><td class='description'>Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h4>MenuNav Node Plugin</h4></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='node-menunav/node-menunav-1.html'>Basic Left Nav</a></td><td class='description'>Creating left navigation using the MenuNav Node Plugin</td></tr>
<tr class='even'><td class='title'><a href='node-menunav/node-menunav-2.html'>Basic Top Nav</a></td><td class='description'>Creating top navigation using the MenuNav Node Plugin</td></tr>
<tr class='odd'><td class='title'><a href='node-menunav/node-menunav-3.html'>Menu Button Top Nav</a></td><td class='description'>Creating menu button navigation using the MenuNav Node Plugin</td></tr>
<tr class='even'><td class='title'><a href='node-menunav/node-menunav-4.html'>Split Button Top Nav</a></td><td class='description'>Creating split button navigation using the MenuNav Node Plugin</td></tr>
<tr class='odd'><td class='title'><a href='node-menunav/node-menunav-5.html'>Left Nav With Submenus With Shadows</a></td><td class='description'>Adding shadows to submenus of a left nav using the MenuNav Node Plugin</td></tr>
<tr class='even'><td class='title'><a href='node-menunav/node-menunav-6.html'>Left Nav With Submenus With Rounded Corners</a></td><td class='description'>Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin</td></tr>
<tr class='odd'><td class='title'><a href='node-menunav/node-menunav-7.html'>Skinning Menus Created Using the MenuNav Node Plugin</a></td><td class='description'>Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr</td></tr>
<tr class='even'><td class='title'><a href='node-menunav/node-menunav-8.html'>Adding Submenus On The Fly</a></td><td class='description'>Building Submenus On The Fly Using the MenuNav Node Plugin with the IO Utility</td></tr>
</tbody>
</table>

	</div>
</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="selected "><a title="Examples of every YUI utility and control in action" href="../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>

</body>
</html>
